<template>
  <div class="wrap">
    <van-nav-bar fixed placeholder :title="friendsInfo.nickname || nickname" left-text="返回" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="ellipsis" size="22" color="#333" />
      </template>
    </van-nav-bar>
    <!-- content -->
    <div class="contents">
      <chatList :chatInfo="chatInfo" :id="id" :userId="getUserInfo._id" />
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <div class="change" @click="changeFlagFun()">
        <img v-show="!changFlag" src="/@/assets/yuyin.png" alt="" />
        <img v-show="changFlag" src="/@/assets/jianpan.png" alt="" />
      </div>
      <div class="input">
        <!-- 文字区域 -->
        <input
          v-show="!changFlag"
          ref="refInput"
          @keyup.enter="addcomment()"
          enterkeyhint="send"
          @blur="blurFun()"
          type="text"
          v-model="message"
        />
        <!-- 语音区域 -->
        <div v-show="changFlag" class="down-up" @touchstart="touchstartFun" @touchend="touchendFun" @touchmove="touchmoveFun">{{
          btnTxt
        }}</div>
      </div>
      <div class="rchange">
        <span class="biaoqing">
          <img src="/@/assets/biaoqing.png" alt="" />
        </span>
        <span class="biaoqing add">
          <img src="/@/assets/add.png" alt="" />
        </span>
      </div>
    </div>
  </div>
  <van-overlay :show="showOverlay">
    <div class="shengbowrap" v-if="currentMode == 0">
      <div class="shengbo">
        <!-- 声波 -->
        正在录音中...
        <span class="sanjiao"></span>
      </div>
    </div>
    <div class="shengbowrap quxiao" v-if="currentMode == 1">
      <div class="shengbo">
        <!-- 声波 -->
        取消录音
        <span class="sanjiao"></span>
      </div>
    </div>
    <div class="shengbowrap zhuanwenzi" v-if="currentMode == 2 || currentMode == 3">
      <div class="shengbo">
        <!-- 声波 -->
        当时只当是寻常、人生若只是初见、何事悲风秋画扇、我真的好想你，在每一个雨季
        <span class="sanjiao"></span>
      </div>
    </div>
    <div class="overlay">
      <div class="overB" :class="currentMode == 3 ? 'touming' : ''">
        <span class="song" v-if="overB == '#d6d6d6'">松开发送</span>
        <!-- 取消发送 -->
        <span class="xx" v-if="currentMode != 3" :class="currentMode == 1 ? 'current' : ''">
          <i class="text" v-if="currentMode == 1">松开取消</i>
          <van-icon name="cross" size="18" />
        </span>
        <!-- 转换文字 -->
        <span class="xx wen" :class="currentMode == 2 ? 'current' : ''">
          <i class="text" v-if="currentMode == 2">转文字</i>
          文
        </span>
        <!-- 点击发送识别后的文字 -->
        <span class="xx wen" v-if="currentMode == 3" :class="currentMode == 3 ? 'current' : ''">
          <van-icon name="success" size="26" color="#6bd81d" />
        </span>
        <span class="xx yuan backxiao" @click="backClickFun()" v-if="currentMode == 3">
          <img src="/@/assets/back.png" alt="" />
          取消
        </span>
        <span class="xx yuan" v-if="currentMode == 3">
          <img src="/@/assets/sheng2.png" alt="" />
          发送原语音
        </span>
        <img src="/@/assets/sheng.png" alt="" />
      </div>
    </div>
  </van-overlay>
</template>

<script setup lang="ts">
  import fetchApi from '/@/api/user/index';
  import { useRoute } from 'vue-router';
  import router from '/@/router';
  import { computed } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  const userStore = useUserStore();
  const socket: any = inject('socket');
  socket.on('users', (res: any) => {
    console.log('连接成功 ', res);
  });
  const getUserInfo = computed(() => {
    const { info } = userStore.$state;
    return info;
  });
  const chatList = defineAsyncComponent(() => {
    return import('/@/components/chatList/index.vue');
  });
  const route = useRoute();
  const showOverlay = ref<boolean>(false);
  let btnTxt = ref<string>('按住 说话');
  let bgColor = ref<string>('#fff');
  let overB = ref<string>('#d6d6d6');
  const currentMode = ref<number>(0); //0 既不是取消也不是转文字 1 是取消  2是转文字
  const refInput = ref();
  const changFlag = ref<boolean>(false);
  const message = ref<string>('');
  const id = ref<string>('');
  const nickname = ref<string>('');
  const friendsInfo = ref<any>('');
  let chatInfo = ref([] as any);
  const onClickLeft = () => {
    router.go(-1);
  };
  const blurFun = () => {
    window.scroll(0, 0);
  };
  /** 切换文字和语音 */
  const changeFlagFun = () => {
    changFlag.value = !changFlag.value;
    if (changFlag.value) {
      nextTick(() => {
        refInput.value.focus();
      });
    }
  };
  /** 获取好友信息 */
  const getFriendsInfoFun = () => {
    fetchApi.getFriendsInfo({ id: id.value }).then((res) => {
      friendsInfo.value = res.data;
    });
  };
  /** 滚动到底部 */
  const scrollBottom = () => {
    // 获取节点
    let chatHistory = document.getElementsByClassName('contents')[0];
    setTimeout(() => {
      //设置滚动条到最底部
      chatHistory.scrollTop = chatHistory.scrollHeight;
    }, 0);
  };
  /** 查询好友聊天信息 */
  const queryChatInfo = () => {
    fetchApi.queryChatInfo({ toId: id.value }).then((res) => {
      chatInfo.value = res.data.reverse();
      scrollBottom();
    });
  };
  /** 手指按下说话 */
  const touchstartFun = (e: any) => {
    console.log(e);
    e.preventDefault(); //去除默认行为
    btnTxt.value = '松开 发送';
    showOverlay.value = !showOverlay.value;
    bgColor.value = '#c0c0c0';
  };
  /** 手指抬起触发 */
  const touchendFun = () => {
    switch (currentMode.value) {
      case 0:
        console.log('发送语音');
        btnTxt.value = '按住 说话';
        showOverlay.value = !showOverlay.value;
        bgColor.value = '#fff';
        break;
      case 1:
        console.log('取消发送');
        btnTxt.value = '按住 说话';
        showOverlay.value = !showOverlay.value;
        bgColor.value = '#fff';
        break;
      case 2:
        console.log('转文字');
        currentMode.value = 3;
        // overB.value = '#d6d6d6'
        break;
      default:
        break;
    }
  };
  /** 手指移动事件 */
  const touchmoveFun = (e: any) => {
    // 先获取手机屏幕的宽高
    const windowWidth = document.documentElement.clientWidth;
    const windowHeight = document.documentElement.clientHeight;
    // console.log(windowWidth);
    // console.log(windowHeight);
    const pos = e.changedTouches[0];
    if (pos.pageY < windowHeight - 100) {
      overB.value = '#666';
    } else {
      overB.value = '#d6d6d6';
      currentMode.value = 0;
    }
    if (pos.pageY < windowHeight - 100 && pos.pageX < windowWidth / 2) {
      // console.log("取消");
      currentMode.value = 1;
    }
    if (pos.pageY < windowHeight - 100 && pos.pageX > windowWidth / 2) {
      // console.log("转文字");
      currentMode.value = 2;
    }
  };
  /** 取消转文字并返回初始状态 */
  const backClickFun = () => {
    showOverlay.value = false;
    btnTxt.value = '按住 说话';
    bgColor.value = '#fff';
    currentMode.value = 0;
    overB.value = '#d6d6d6';
  };
  /** 发送消息 */
  const addcomment = () => {
    let obj = {
      come_id: id.value, //接收方的id
      send_id: getUserInfo.value._id, //发送方的id
      type: 1, //消息类型 1 文字消息
      send_avatar: getUserInfo.value.avatar, //发送者的头像
      message: message.value, //发送的文字内容
      send_name: getUserInfo.value.nickname, //发送者的昵称
      date: new Date(), //发送的当前时间
    };
    socket.emit('sayTo', obj);
    chatInfo.value.push(obj);
    message.value = '';
    scrollBottom();
    fetchApi.sendMsg({ message: obj.message, toId: obj.come_id, type: obj.type });
  };
  /** 监听socket消息 */
  socket.on('message', (data: any) => {
    chatInfo.value.push(data);
    scrollBottom();
  });
  onMounted(() => {
    // console.log(route.query);
    id.value = String(route.params.id);
    nickname.value = String(route.query.nickname);
    getFriendsInfoFun();
    queryChatInfo();
  });
</script>

<style lang="scss" scoped>
  .wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .contents {
      scroll-behavior: smooth;
      flex: 1;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      background: url('https://pcsys.admin.ybc365.com/951a18ce-d222-47d3-9d00-28c19c4edad3.jpeg') no-repeat center center;
      background-size: cover;
      padding: 20px;
    }

    .bottom {
      height: 100px;
      background: #eee;
      display: flex;
      align-items: center;

      .change {
        width: 100px;
        display: flex;
        justify-content: center;

        img {
          width: 50%;
          height: 100%;
        }
      }

      .rchange {
        width: 155px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        margin-top: 10px;

        .biaoqing {
          img {
            width: 50px;
          }
        }

        .add {
          img {
            width: 55px;
          }
        }
      }

      .input {
        flex: 1;
        height: 66%;

        input {
          width: 100%;
          height: 100%;
          outline: none;
          border: none;
          padding-left: 20px;
          box-sizing: border-box;
        }

        .down-up {
          display: flex;
          justify-content: center;
          align-items: center;
          background: v-bind(bgColor);
          border-radius: 6px;
          height: 100%;
          color: #333;
          font-weight: bold;
        }
      }
    }
  }

  .shengbowrap {
    display: flex;
    justify-content: center !important;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -150px;

    .shengbo {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      background: #6bd81d;
      width: 300px;
      padding: 20px 0;
      border-radius: 10px;

      // img {
      //   width: 90px;
      //   height: 40px;
      // }

      span.sanjiao {
        position: absolute;
        left: 50%;
        bottom: -25px;
        height: 0;
        border: 15px solid transparent;
        border-top-color: #6bd81d;
        margin-left: -15px;
      }
    }
  }

  .quxiao {
    left: 25% !important;

    .shengbo {
      width: 200px;
      background: #f44343;
    }

    span.sanjiao {
      border-top-color: #f44343 !important;
      left: 100px !important;
    }
  }

  .zhuanwenzi {
    right: 50px !important;

    .shengbo {
      width: 100%;
      padding: 20px !important;
    }

    span.sanjiao {
      left: 80% !important;
    }
  }

  .overlay {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    color: #fff;
    height: 100%;

    .overB {
      width: 120%; // 宽度大点，用来隐藏左右比较不平滑的弧度
      height: 180px; // 通过改变高度，可以调整弧度大小
      background: v-bind(overB);
      border-radius: 50% 50% 0 0; // 左下、右下圆角处理
      margin-right: -10%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: relative;

      span.song {
        position: absolute;
        top: -50px;
        font-size: 24px;
        color: #e4e4e4;
        font-weight: bold;
      }

      span.xx {
        position: absolute;
        top: -170px;
        left: 20%;
        width: 110px;
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #666;
        border-radius: 100%;
        transform: rotate(-10deg);

        i.text {
          position: absolute;
          top: -50px;
          left: 20px;
          font-style: normal;
          font-size: 26px;
          transform: rotate(10deg) !important;
          white-space: nowrap;
          color: #f3f3f3 !important;
          font-weight: bold;
        }
      }

      span.yuan {
        display: flex;
        flex-direction: column;
        background: transparent;
        transform: rotate(0deg);
        font-size: 24px;
        white-space: nowrap;
        left: 45%;
        margin-top: 35px;

        img {
          width: 40px;
          height: 40px;
          margin-bottom: 6px;
        }
      }

      span.backxiao {
        left: 20%;
      }

      span.wen {
        left: 70% !important;
        transform: rotate(10deg) !important;

        i.text {
          left: 5px;
          transform: rotate(-10deg) !important;
        }
      }

      .current {
        background: #f3f3f3 !important;
        color: #333 !important;
      }

      img {
        width: 60px;
        height: 60px;
        margin-top: -60px;
      }
    }

    // .touming{
    //   background: transparent;
    // }
  }

  ::v-deep(.van-nav-bar__arrow),
  ::v-deep(.van-nav-bar__text) {
    color: #333 !important;
  }
</style>
